import React, {Component} from "react";
// import logo from "./logo.svg";
import Poop from "./components/poop/poop";
import Dep from "./views/dep/dep";
import Files from "./views/files/files";
import Script from "./views/script/script";
import "./assets/styles/clear.css";
import "./App.scss";

import {library} from "@fortawesome/fontawesome-svg-core";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
    faTrash,
    faFolder,
    faClock,
    faBox,
    faCog,
    faTasks,
    faHome,
    faSearch,
    faEllipsisH,
    faRedo,
    faUpload,
    faCheck
} from "@fortawesome/free-solid-svg-icons";

import {CSSTransition} from "react-transition-group";

library.add(
    faTrash,
    faFolder,
    faClock,
    faBox,
    faCog,
    faTasks,
    faHome,
    faSearch,
    faEllipsisH,
    faRedo,
    faUpload,
    faCheck
);

class App extends Component {
    render() {
        return (
            <div className="App">
                <main>
                    <div className="panel">
                        <ul className="menu">
                            {this.state.menu.map((item, index) => {
                                return (
                                    <li
                                        onClick={() => {
                                            this.setState({menuIndex: index});
                                        }}
                                        className={this.state.menuIndex === index ? "act" : ''}
                                        key={index}
                                    >
                                        <FontAwesomeIcon icon={item.icon}/>
                                        <span>{item.title}</span>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                    <div className="view">
                        <div className="view-header">
                            <div className="title">{this.state.menu[this.state.menuIndex].title}</div>
                        </div>
                        <div className="view-main">
                            {this.state.menuIndex === 1 && (
                                <Dep
                                    poopHandle={(poopSwitch, poopType) =>
                                        this.poopHandle(poopSwitch, poopType)
                                    }
                                />
                            )}
                            {this.state.menuIndex === 2 && <Files/>}
                            {this.state.menuIndex === 3 && <Script/>}
                        </div>
                    </div>

                </main>
                <footer>
                    <div className="path">
                        <b>
                            <FontAwesomeIcon icon="home"/>
                        </b>
                        <b>
                            <FontAwesomeIcon icon="folder"/>
                        </b>
                        {this.state.pwd}
                    </div>
                </footer>
                <CSSTransition
                    in={this.state.poopState}
                    timeout={300}
                    classNames="fade"
                    unmountOnExit
                >
                    <Poop
                        type={this.state.poopType}
                        reqPwd={() => this.reqPwd()}
                        poopHandle={(poopSwitch, poopType) =>
                            this.poopHandle(poopSwitch, poopType)
                        }
                    />
                </CSSTransition>
            </div>
        );
    }

    constructor(props) {
        super(props);
        this.state = {
            serveRoot: [
                "http://localhost:3389/",
                "http://139.155.101.145:3389/",
                "http://10.11.165.86:3389/"
            ],
            serveIndex: 2,
            info: "hello react",
            pwd: "/",
            poopState: false,
            menu: [
                {
                    title: "仪表盘",
                    icon: "clock"
                },
                {
                    title: "插件管理",
                    icon: "box"
                },
                {
                    title: "文件管理",
                    icon: "folder"
                },
                {
                    title: "项目命令",
                    icon: "tasks"
                }
            ],
            menuIndex: 2
        };
    }

    componentDidMount() {
        this.reqPwd();
    }

    reqPwd() {
        fetch(this.state.serveRoot[this.state.serveIndex] + "pwd")
            .then(response => response.json())
            .then(data => {
                console.log(data);
                this.setState({
                    pwd: data.result
                });
            });
    }

    poopHandle(poopSwitch, poopType) {
        if (!poopType) {
            this.setState({
                poopState: poopSwitch
            });
            return;
        }
        this.setState({
            poopState: poopSwitch,
            poopType: poopType
        });
    }
}

export default App;
